var resetBtn = document.getElementsByClassName("Rset");
var ipt = document.getElementsByTagName("input");



var tip = document.getElementsByClassName("tips");
// 给每个输入框绑定按键和聚焦事件
for(var i=0 ; i<6;i++){
    (function(k){
        // 设置聚焦的时候出现重置按钮
        ipt[k].addEventListener("keydown",function(){
            if(ipt[k].value!= ""){
                resetBtn[k].style.display = "block";
            }

        }) 
        // 设置输入框无内容时,重置按钮消失
        ipt[k].addEventListener("keyup",function(){
            if(ipt[k].value == ""){
                resetBtn[k].style.display = "none";
            }


            // 各种键盘响应事件
            //回车和上下切换输入框或着页面
            //特定位置的回车会触发注册或者登陆
            e = window.event;
            (function(){

                var keycode =e.which||e.keyCode;
             switch(keycode){
            // 回车事件
                case 13:{
                    // 当输入密码后按回车执行登陆
                    if(k+1 == 2){
                        signBtn.click();
                    }
                    // 当注册完信息按回车执行注册
                    else if(k+1 == 6){
                        reBtn.click();
                    }
                    // 其他情况按回车则是切换输入行
                    else{
                        ipt[k+1].focus();
                        ipt[k+1].select();
                    }
                   
                    break;

                }
                // 按键"上"事件
                  case 38:{
                // 如果处于注册界面的第一个输入框,按上则进入登陆界面的第一个输入框,锁定光标
                if(k-1 == 1){
                    toSign.click();
                    ipt[k-2].focus();
                    ipt[k-2].select();
                }
                // 其他情况就是向上移动光标
                else{
                    ipt[k-1].focus();
                    ipt[k-1].select();
                }
                break;
            }
            
            // 键盘"下"事件
                  case 40:{
                // 当光标在登陆界面的密码处时,向下则到注册界面的第一个输入框
                if(k+1 ==2){
                    toRegister.click();
                    ipt[k+1].focus();
                    ipt[k+1].select();
                }
                // 其他情况则是正常向下移动光标
                else{
                    ipt[k+1].focus();
                    ipt[k+1].select();
                }
                break;
                }
            }
            }())
        }) 

        // 点击重置按钮的事件
        // 清空输入框,重置按钮消失,直至输入框输入数据
        resetBtn[k].onclick = function(){   
            ipt[k].value="";
            resetBtn[k].style.display = "none";
            tip[k].style.display = "none";
        }

    })(i);
}



var reg0 = /\W{1,10}/;
// 正则表达式验证用户名是否为10位以内的英文和数字
ipt[0].addEventListener("keydown",function(){
    var str = ipt[0].value;
    if(ipt[0].value ==""){
        resetBtn[0].style.display = "none";
        tip[0].style.display = "none";
    }
    else{
        if(!reg0.test(str)){
            tip[0].style.display = "none";
            resetBtn[0].style.display = "block";
          
            if(ipt[0].value.length == 10){
                tip[0].style.display = "block";
                tip[0].textContent = "格式正确√,但请不要超过10位";
            }
        }   
        else{
            tip[0].style.display = "block";
            tip[0].textContent = "注意:账号只由英文，数字和下划线‘_’的10位以内字符组成";
        }
    }
   
}) 
ipt[0].addEventListener("keyup",function(){
    var str = ipt[0].value;
    if(ipt[0].value ==""){
        resetBtn[0].style.display = "none";
        tip[0].style.display = "none";
    }
    else{
        if(!reg0.test(str)){
            tip[0].style.display = "none";
            resetBtn[0].style.display = "block";
          
            if(ipt[0].value.length == 10){
                tip[0].style.display = "block";
                tip[0].textContent = "格式正确√,但请不要超过10位";
            }
        }   
        else{
            tip[0].style.display = "block";
            tip[0].textContent = "注意:账号只由英文，数字和下划线‘_’的10位以内字符组成";
        }
    }

})  

// 密码最长不要超过16位
ipt[1].addEventListener("keydown",function(){
    if(ipt[1].value.length == 16){
        tip[1].style.display = "block";
    }
    else{
        tip[1].style.display = "none";
    }
   
})
ipt[1].addEventListener("keyup",function(){
    if(ipt[1].value.length == 16){
        tip[1].style.display = "block";
    }
    else{
        tip[1].style.display = "none";
    }
   
})





var reg2 = /\W{1,10}/;
// 正则表达式验证用户名是否为10位以内的英文和数字
ipt[2].addEventListener("keydown",function(){var str = ipt[2].value;
    if(ipt[2].value ==""){
        resetBtn[2].style.display = "none";
        tip[2].style.display = "none";
    }
    else{
        if(!reg2.test(str)){
            tip[2].style.display = "none";
            resetBtn[2].style.display = "block";

            if(ipt[2].value.length == 10){
                tip[2].style.display = "block";
                tip[2].textContent = "格式正确√,但请不要超过10位";
            }
        }   
        else{
            tip[2].style.display = "block";
             tip[2].textContent = "注意:账号只由英文，数字和下划线‘_’的10位以内字符组成";
        }
    }

   
}) 
ipt[2].addEventListener("keyup",function(){
    var str = ipt[2].value;
    if(ipt[2].value ==""){
        resetBtn[2].style.display = "none";
        tip[2].style.display = "none";
    }
    else{
        if(!reg2.test(str)){
            tip[2].style.display = "none";
            resetBtn[2].style.display = "block";

            if(ipt[2].value.length == 10){
                tip[2].style.display = "block";
                tip[2].textContent = "格式正确√,但请不要超过10位";
            }
        }   
        else{
            tip[2].style.display = "block";
             tip[2].textContent = "注意:账号只由英文，数字和下划线‘_’的10位以内字符组成";
        }
    }

})  


// 注册的密码最长不要超过16位
ipt[3].addEventListener("keydown",function(){
    if(ipt[3].value.length == 16){
        tip[3].style.display = "block";
    }
    else{
        tip[3].style.display = "none";
    }
   
})
ipt[3].addEventListener("keyup",function(){
    if(ipt[3].value.length == 16){
        tip[3].style.display = "block";
    }
    else{
        tip[3].style.display = "none";
    }
   
})

// 用户名最长不要超过10位字符
ipt[4].addEventListener("keydown",function(){
    if(ipt[4].value.length == 10){
        tip[4].style.display = "block";
    }
    else{
        tip[4].style.display = "none";
    }
   
})
ipt[4].addEventListener("keyup",function(){
    if(ipt[4].value.length == 10){
        tip[4].style.display = "block";
    }
    else{
        tip[4].style.display = "none";
    }
   
})




// 正则表达式验证是否手机号码输入为数字并自动清空
var reg5 = /[1][3]\d{0,9}$|[1][5]\d{0,9}$|[1][7]\d{0,9}$|[1][8]\d{0,9}$/;
ipt[5].addEventListener("keydown",function(){
    var str = ipt[5].value;
    if(ipt[5].value ==""){
        resetBtn[5].style.display = "none";
        tip[5].style.display = "none";
    }
    else{
        if(reg5.test(str)){
            tip[5].style.display = "none";
            resetBtn[5].style.display = "block";
            if(ipt[5].value.length == 11){
                tip[5].style.display = "block";
                  tip[5].textContent = "格式正确＜（＾－＾）＞√";
              }
        }   
        else{
              tip[5].textContent = "请输入11位并以13、15、17、18开头的电话";
            tip[5].style.display = "block";
        }
       

    }
   
}) 
ipt[5].addEventListener("keyup",function(){
    var str = ipt[5].value;

    
    if(ipt[5].value ==""){
        resetBtn[5].style.display = "none";
        tip[5].style.display = "none";
    }
    else{
        if(reg5.test(str)){
         
          
            tip[5].style.display = "none";
            resetBtn[5].style.display = "block";
               
            if(ipt[5].value.length == 11){
                tip[5].style.display = "block";
                  tip[5].textContent = "格式正确＜（＾－＾）＞√";
              }
          
        }   
        else{
            tip[5].textContent = "请输入11位并以13、15、17、18开头的电话";
            tip[5].style.display = "block";
       
        }
       

    }

})  
